<template>
  <el-container>
          <div class="Jump">
       <el-button
        @click="$router.push('/map')"
        style="margin-right: 20px"
        icon="el-icon-back"
        type="primary"
        >返回上一页</el-button
      >
   </div>
    <!-- <el-header>
       <el-button @click="$router.push('/foodSafety/archives/archives')"    style="margin-right: 20px" icon="el-icon-back" type="primary"
            >返回上一页</el-button
          >
          <rz-height></rz-height>
      <div class="title">
        {{data.operAtorName||data.unitname}}
      </div>
      <rz-height></rz-height>
      <el-row :gutter="20">
        <el-col :span="6">统一社会信用代码:{{data.identify}}</el-col>
        <el-col :span="6" v-if="data.newlicenseno">许可证编号:{{data.newlicenseno}}</el-col>
      </el-row>
      <rz-height></rz-height>
      <el-row>
        <el-col :span="24">地址:{{data.productionAddress||data.address}}</el-col>
      </el-row>
    </el-header>
     <el-header> -->
    <el-header>
      <!-- <el-button
        @click="$router.push('/map')"
        style="margin-right: 20px"
        icon="el-icon-back"
        type="primary"
        >返回上一页</el-button
      > -->
      <rz-height></rz-height>
      <div class="title_wapper">
        <el-progress :width="100" :stroke-width="12" color="#1890ff" type="circle" :format="()=>data.indexScore||0" :percentage="data.indexScore||0"></el-progress>
        <div class="title_right">
          <div class="title">
            {{ data.workStationName }}
          </div>
           <div>
              <el-tag>{{ data.districtName + "—" + data.streetName }}</el-tag>
           </div>
            <div>食安站站长：{{ data.userName }}({{ data.userTelTrue }})</div>
        </div>
      </div>

      <!--  -->

      <rz-height></rz-height>
      <el-row :gutter="20">
        <el-col :span="8">统一社会信用代码：{{ data.identify }}</el-col>
        <el-col :span="12"
          >营业执照名称：{{ data.unitName }}
          
          </el-col
        >
      </el-row>
      <rz-height></rz-height>
      <rz-height></rz-height>
      <el-row :gutter="20">
        <el-col :span="8">注册日期：{{ data.createDateTimeStr }}</el-col>
        <el-col :span="12"
          >地址：{{ data.productionAddress || data.address }}</el-col
        >
      </el-row>
    </el-header>
    <el-container class="content">
      <el-aside width="200px">
        <el-menu
          :default-active="defaultActive"
          class="el-menu-vertical-demo"
          router
          active-text-color="#ffffff" text-color="#000"
        >
          <el-menu-item
            :index="`${item.route}`"
            v-for="item in list"
            :key="item.id"
          >
            <span slot="title">{{ item.title }}</span>
          </el-menu-item>
        </el-menu>
      </el-aside>
      <el-main>
        <router-view></router-view>
      </el-main>
    </el-container>
  </el-container>
</template>
<script>
import { findWorkstation } from "@/api/modules/workstation";
export default {
  // props:[],
  // 页面加载
  created() {
    this.getCompanyMainPageInfo();
  },
  // 页面加载完成
  mounted() {},
  //实例销毁之前
  beforeDestroy() {},
  //实例销毁后
  destroyed() {},
  data() {
    return {
      list: [
         {
          title: "综合分析",
          id: 0,
          route: "/workstationScore",
        },
        {
          title: "联席会议",
          id: 1,
          route: "/workstationScore/meeting?totalScore=jointConferenceTotal&type=1&title=召开联席会议&value=jointConferenceScore",
        },
        {
          title: "组织培训",
          id: 2,
          route: "/workstationScore/meeting?totalScore=trainingTotal&type=2&title=定期组织培训&value=trainingScore",

        },
        {
          title: "检查台账",
          id: 3,
                   route: "/workstationScore/meeting?totalScore=checkRecordTotal&type=3&title=检查台账&value=checkRecordScore",
        },
        {
          title: "定期检查",
          id: 4,
                  route: "/workstationScore/meeting?totalScore=checkResultTotal&type=4&title=定期检查&value=checkResultScore",

        },
        {
          title: "宣传公示",
          id: 5,
                 route: "/workstationScore/meeting?totalScore=publicityTotal&type=5&title=宣传公示&value=publicityScore",

        },
        {
          title: "食品安全快检",
          id: 6,
                  route: "/workstationScore/meeting?totalScore=quickCheckTotal&type=6&title=食品安全快检&value=quickCheckScore",

        },
        {
          title: "经营单位",
          id: 7,
                   route: "/workstationScore/meeting?totalScore=safetySuperviseUnitTotal&type=7&title=经营单位&value=safetySuperviseUnitScore",

        },
      ],
      defaultActive: "/workstationScore",
      data: {},
    };
  },
  // 方法
  methods: {
    getCompanyMainPageInfo() {
      findWorkstation({
        params: {
          id: sessionStorage.getItem("workId"),
        },
      }).then((res) => {
        sessionStorage.setItem("unitName",res.data.unitName)
        this.data = res.data;
      });
    },
      format(){
      return 
    }
  },
  // 监听属性
  watch: {},
  // 组件
  components: {},
  // 计算属性
  computed: {
  
  },
};
</script>

<style lang="scss" scoped>
.el-container {
  height: calc(100% - 130px);

  .el-header {
    padding: 20px;
    height: auto !important;
      background: $default;
    color: #ffffff;
    .title_wapper {
      display: flex;
      .el-progress__text{
        color: red;
      }
      .title {
        font-size: 25px;
        font-weight: 700;
      }

      .el-tag {
        margin-right: 10px;
      }
      .title_right{
        display: flex;
        justify-content: space-between;
        flex-direction: column;
        padding-left: 20px;
      }
      /deep/ .el-progress__text{
        font-size: 18px !important;
      }
    }
  }
 .Jump{
      padding: 10px;
      background: #2e40d1;
    }
  .el-aside {
    height: 100%!important;
    /deep/ .el-menu {
      border-right: none;
         .is-active{
           background-color: $default;
           opacity: 0.7;
         }
    }
  }
  .el-main {
    background-color: #f2f2f2;
    // height: 100%;
  }
}
// .content{
//   height:calc(100% - 120px);
// }
</style>